<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.active {
			   background: #fd7522;
			   border: 1px solid #fd7522;
			   color: #ff0000;
			 }
		</style>
	</head>
	<body>

		<div id="app">
			<div v-if="books.length">
			<table class="table">
				<thead>
					<th>选中</th>
					<th>数据id</th>
					<th>书籍名称</th>
					<th>出版日期</th>
					<th>价格</th>
					<th>购买数量</th>
					<th>操作</th>
				</thead>
				<tbody>
					 <!-- 关于key的作用：
					 如果不加key，当我们删除第二个选中的选项时，会把√移到下一个选项；
					  而第一个选项不会，因为在vue的data中显式的定义了该CheckBox的值，而鼠标点击则修改了DOM，
					  如果不加 key ，则 vue 不会更新DOM-->
				<tr v-for="(book,index) in books" :key = "book.id" :class="{active : book.isChecked}">
					 <!-- v-bind 语法糖 :-->
					<td ><input type="checkbox" :checked="book.isChecked" @click="selected(index)" v-model="checkedNames" :value="book.id"></td>
					<td >{{book.id}}</td>
					<td >{{book.bookName}}</td>
					<td >{{book.proDate}}</td>
<!--					 过滤器写法 -->
					<td >{{book.price | formatPrice}}</td>
					<!-- v-on : 语法糖 @ -->
<!--					当数量唯一时，不可用再操作减号：v-bind:disabled="book.num <= 1"-->
					<td ><button id="sel" value="+" @click="add(index)">+</button>&emsp;{{book.num}}&emsp;<button @click="del(index)" v-bind:disabled="book.num <= 1"> -</button></td>
					<td><button value="移除" @click="remove(index)">移除</button></td>
				</tr>
				</tbody>
			</table>
			<button @click="submit(books)">结账</button>
			<!-- <span>Checked names: {{ checkedNames }}</span> -->
			
			<!-- <span style="color: red; font-size:40px;" > 总价格：{{formatPrice(total)}}</span> -->
			<span style="color: red; font-size:40px;" > 总价格：{{total | formatPrice}}</span>
			</div>
			<h1 v-else>没有选中商品！</h1>
		</div>
			
		
        <script src="../js/vue.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">

			let app = new Vue({
			  el: '#app',// 挂载的标签
			  parentMessage: 'Parent',
			  data: {
			    message: 'Hello Vue!',
			    books: [{
					isChecked: false,
			    	id: 1,
			    	proDate: '2020-01',
			    	price: 58,
			    	num: 1,
			    	bookName: 'Java',
			    },
			    {
					isChecked: false,
			    	id: 2,
			    	proDate: '2020-02',
			    	price: 68,
			    	num: 1,
			    	bookName: 'JavaScript',
			    },
			    {
					isChecked: false,
			    	id: 3,
			    	proDate: '2020-03',
			    	price: 88,
			    	num: 1,
			    	bookName: 'PHP',
			    },
			    {
					isChecked: false,
			    	id: 4,
			    	proDate: '2020-04',
			    	price: 98,
			    	num: 1,
			    	bookName: '数据结构',
			    }],
				active: '',
				checkedNames: []
			  },
			  methods: {
				  submit(item){
					  this.checkedNames.forEach(function(i) {
					  console.log(i);
						
					  })
				  },
				  selected(index){
				     // this.active = name;
					 this.books[index].isChecked = !this.books[index].isChecked;
					 console.log(this.books[index].isChecked);
				  },
			  	add: function(index){
			  		this.books[index].num++

			  	},
			  	del: function(index){
			  		if(this.books[index].num == 1)
			  			return false;
			  		
			  		this.books[index].num--

			  	},
			  	remove: function(index){
			  		this.books.splice(index,1)
			  	}
			  },
			  computed: {
				   total: function() {
					var count = 0;
				    this.books.forEach(function(item) {
            		count += item.num * item.price;
				    })
				return count
				// return this.books.reduce((returnVal, nextItem) => returnVal + nextItem.price * nextItem.num)
			  },
			  // 计算属性中的传值，return一个函数
			  formatPrice: function(){
				  // return function(price) {
					 //  console.log(price);
					 //  return '¥' + price.toFixed(2);
				  // }
				  //箭头函数的写法
				  return price => '¥' + price.toFixed(2);
			  }
			 },
			 // 改用过滤器传参
			 filters: {
				 formatPrice: price => '¥' + price.toFixed(2)
			 }
			})
			
		</script>
	</body>
</html>
